<template>
	<div class="eventWraper zixun-box" v-if="selarticleList.length > 0">
		<div class="rsTitle rsTitleBg flex align_items_c justify_content_sb">
			<div class="rsTitleLeft flex align_items_c justify_content_sb">
				<div>{{ partName }}</div>
				<!-- <div
					class="flex align_items_c pointer rsTitleLeft_more"
					@click="toPartPage"
				>
					<div class="rsTitleLeft_point"></div>
					<div class="rsTitleLeft_point"></div>
					<div class="rsTitleLeft_point"></div>
				</div> -->
			</div>
		</div>
		<div class="MainRight_2 MainRight_3 steps homesteps eventWraper_content">
			<div
				class="description"
				slot="description"
				v-for="(item, index) in selarticleList"
				:key="index"
			>
				<div class="flex align_items_c">
					<span class="stepIcon"></span>
					<div class="stepTime">{{
						this.$utils.convertToLocalTime(item.release_time)
					}}</div>
				</div>
				<router-link
					target="_blank"
					:to="{ name: '/kuaixun_wz', params: { id: item.id } }"
				>
					<div class="stepsText ellipsis_multiple pointer hovercolor">
						{{
							localLanguage == 2
								? item.title
									? item.title
									: item.title
								: item.title
						}}
					</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import clipboard from "clipboard";
import { newBus } from "@/components/pc/topHeader2.vue";

export default {
	props: ["selarticleList", "partName"],
	data() {
		return {
			currentShow: 0,
			localLanguage: 1,
		};
	},
	mounted() {
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
	},
	methods: {
		changePart(ind) {
			this.currentShow = ind;
		},
	},
};
</script>

<style scoped>
.zixun-box .rsTitle {
	border: none;
}
.description {
	padding-bottom: clamp(12px, calc(100vw * 1 / 90), 16px);
	margin-top: clamp(12px, calc(100vw * 1 / 72), 20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.stepIcon {
	width: 5px;
	height: 5px;
	margin-right: 10px;
	border-radius: 50%;
	background: linear-gradient(
		21deg,
		#9945ff -24%,
		#8752f3 -3%,
		#5497d5 15%,
		#43b4ca 25%,
		#28e0b9 36%,
		#19fb9b 60%
	);
}
.stepTime {
	font-size: 12px;
	line-height: 12px;
	color: #b2b2b2;
}
.time-bottom {
	margin-top: 15px;
}
.stepsText {
	margin-top: 5px;
	font-family: PingFang SC;
	font-size: clamp(12px, calc(100vw * 14 / 1440), 14px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0em;
	/* 纯白 */
	color: #ffffff;
}
.btn {
	width: 40px;
	height: 25px;
	margin-left: 12px;
	line-height: 25px;
	text-align: center;
	background: #fff;
	border-radius: 13px;
	font-size: 12px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #a0a0a9;
}
.activeBtn {
	color: #0056ff;
}

.homesteps_el {
	margin-top: 30px;
}
.homesteps .el-step__main {
	height: auto;
	margin-left: 10px;
}
.homesteps .stepsVal {
	font-size: 14px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #000000;
	margin-top: 5px;

	line-height: 21px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;

	font-size: 14px;
	font-weight: normal;

	/* 黑色主色（字段一级） */
	color: #333333;
}

.btnitem {
	margin-top: 7px;
}

.btnitem img {
	width: 14px;
	margin-right: 3px;
}
.fx div {
	/* font-size: 12px;
	font-family:  "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
	color: #a0a0a8; */

	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 13px;
	letter-spacing: 0em;

	color: #b2b2b2;
}
.MainRight_3 {
	padding-top: 0px;
	/* height: 600px; */
}
</style>

<style>
.eventWraper .el-step.is-vertical .el-step__line {
	top: 0px !important;
	/* margin-top: 10px; */
}
.eventWraper .el-step__description {
	margin-top: 0;
	padding-right: 0% !important;
}

.eventWraper .el-step__icon {
	top: -13px;
}

.eventWraper .el-step__main {
	padding-top: 0px;
	margin-top: -8px;
}

.homesteps.eventWraper_content {
	background: transparent !important;
}

.img_text_box {
	margin-top: 30px;
}

.zixun-box .wzitem_sub_img {
	width: clamp(120px, calc(100vw * 1 / 9), 160px);
	height: calc(100vw * 9 / 144);
	border-radius: 18px;
	object-fit: cover;
	margin-right: clamp(10px, calc(100vw * 3 / 144), 30px);
}

.wzitem_sub_Left_content {
	font-family: AlibabaPuHuiTi;
	font-size: clamp(10px, 1vw, 14px);
	line-height: 1.4;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}

.zixun-box .wzitem_sub_Left_time {
	font-family: PingFang SC;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
	margin-top: 20px;
}
</style>
